{extend name="public/common"}

{block name="style"}
<title>组织架构</title>
<style>
    body {
        background: #f9f9f9;
    }

    .wrap ul li {
        width: 94vw;
        padding: 1.5vw 0;
        background: #fff;
        margin: 0 auto;
        margin-top: 1.65vh;
        border-radius: 5px;
    }

    .wrap ul li .d_img {
        float: left;
        width: 16vw;
        height: 16vw;
        border-radius: 50%;
        margin-right: 4vw;
        margin-left: 4vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wrap ul li p {
        height: 8vw;
        display: flex;
        align-items: center;
    }

    .wrap ul li p span {
        color: #282828;
        font-size: 0.32rem;
        display: inline-flex;
        flex: 1.2;
    }

    .wrap ul li p span:first-child {
        flex: 3;
    }

    .d_img span {
        font-size: 10vw;
        color: #fff;
    }
    .panel{
        margin-bottom: 0;
    }
    .flip{
        width:100vw;
        height:10vw;
        line-height:10vw;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
        font-size: 0.34rem;
    }
    .flip:after{
        display: inline-block;
        content: '';
        background: url("/home/images/structure/arrow-down-o.png");
        width:0.3rem;
        height:0.3rem;
        background-size: 0.3rem 0.3rem;
        margin-left: 3vw;
    }
    .slideup:after{
        display: inline-block;
        content: '';
        background: url("/home/images/structure/arrow-top-o.png");
        width:0.3rem;
        height:0.3rem;
        background-size: 0.3rem 0.3rem;
        margin-left: 3vw;
    }
    .default{
        height:100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .default img{
        width:16vw;
        margin-top: -10vw;
    }
</style>
{/block}

{block name="body"}
<div class="wrap scroll"
     style="position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0">
    {if condition="$list eq null && $lists eq null "}
            <div class="default"><img src="/home/images/common/nomessage.png"></div>
    {else/}
    <ul class="leader">
        {volist name="list" id="ll"}
        <li>
            <div class="d_img"><span></span></div>
            <p><span>姓名：<span class="name">{$ll.name}</span></span></p>
            <p>
                <span>职务：{$ll.position}</span>
                <span>性别：{eq name="$ll.gender" value="1"}男{else/}女{/eq}</span>
            </p>
        </li>
        {/volist}
    </ul>
    <ul style="display: none;" class="pane">
        {volist name="lists" id="ll"}
        <li>
            <div class="d_img"><span></span></div>
            <p><span>姓名：<span class="name">{$ll.name}</span></span></p>
            <p>
                <span>职务：{$ll.position}</span>
                <span>性别：{eq name="$ll.gender" value="1"}男{else/}女{/eq}</span>
            </p>
        </li>
        {/volist}
    </ul>
    <p class="flip">点击查看全部成员</p>
    {/if}
</div>
{/block}

{block name="script"}
<script>
    $("title").text("组织架构");

    if($(".pane li").length==0 || $(".leader li").length==0){
        $(".flip").hide();
        $(".pane").show();
    }
    var bg_color = ["#b1e3fc", "#aeefef", "#ffa351", "#9393f5", "#cf88f7", "#65abfa", "#ebcffb", "#76f4f0", "#ffcf6e", "#ff8ff4"];
    for (i = 0; i < $(".wrap ul li").length; i++) {
        $(".d_img").eq(i).css({"background": bg_color[Math.floor(Math.random() * 10)]});
        $(".d_img").eq(i).find("span").text($(".name").eq(i).text().substr(0, 1));
    }

    $(".flip").click(function(){
        $(this).toggleClass("slideup");
        if($(this).hasClass("slideup")){
            $(".pane").slideDown("slow");
            $(".flip").html("点击收起")
        }else{
            $(".pane").slideUp("fast");
            $(".flip").html("点击查看全部成员")
        }

    });

    var overscroll = function (el) {
        el.addEventListener('touchstart', function () {
            var top = el.scrollTop
                    , totalScroll = el.scrollHeight
                    , currentScroll = top + el.offsetHeight;
            if (top === 0) {
                el.scrollTop = 1;
            } else if (currentScroll === totalScroll) {
                el.scrollTop = top - 1;
            }
        });
        el.addEventListener('touchmove', function (evt) {
            if (el.offsetHeight < el.scrollHeight)
                evt._isScroller = true;
        });
    }

    overscroll(document.querySelector('.scroll'));
    document.body.addEventListener('touchmove', function (evt) {
        if (!evt._isScroller) {
            evt.preventDefault();
        }
    });
</script>
{/block}